<template>
  <div class="Login">
    <el-row>
      <el-col :span="8" :offset="10">
        <el-card class="box-card">
          <el-row class="MRow" style="height: 100px">
            <img src="../assets/logo.png" style="height: 100px">
          </el-row>
          <el-row class="MRow">
            <el-col :span="22" :offset="1">
              <el-input placeholder="账号" v-model="username" style="opacity: 0.85"></el-input>
            </el-col>
          </el-row>
          <el-row class="MRow">
            <el-col :span="22" :offset="1">
              <el-input type="password" placeholder="密码" v-model="password" style="opacity: 0.85"></el-input>
            </el-col>
          </el-row>
          <el-row class="MRow">
            <el-col :span="22" :offset="1">
              <el-button type="primary" style="width: 100%" @click="loginDo" v-bind:loading="loading">登陆</el-button>
            </el-col>
          </el-row>
          <el-row class="MRow">
            <el-col :span="22" :offset="1">
              <el-button type="text">忘记密码？</el-button>
            </el-col>
          </el-row>
        </el-card>

      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: 'Login',
    data(){
      return {
        apiRoot: process.env.API_ROOT,
        username: null,
        password: null,
        loading: false
      }
    },
    methods: {
      loginDo () {
        this.loading=true;
        this.$axios({
          url: this.apiRoot + '/login',
          method: 'post',
          data:{
              username: this.username,
              password: this.password
          },
          transformRequest: [function (data) {
            // Do whatever you want to transform the data
            let ret = ''
            for (let it in data) {
              ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
            }
            return ret
          }],
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then(response => {
          if (response.data.code === '0'){
            sessionStorage.setItem('user', JSON.stringify(response.data));
            this.$router.push('/dashboard');
          }
          else {
            this.$message.error("账号或密码错误");
          }
          this.loading=false;
        }, response => {
          this.$message.error('系统出错咯');
        })
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .Login {
    height: 100%;
    width: 100%;
    background: url("../assets/back.jpg") no-repeat;
    background-size: 100% 100%;
  }

  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    margin-top: 75px;
    min-height: 360px;
    width: 340px;
    background: rgba(255, 255, 255, 1);
  }

</style>
